<template>
  <div>
    <Hearder></Hearder>


    <div class="personal_main">
      <div id="app" style="font-weight: 400;line-height: 1.5;color: #212529;text-align: left;">
        <div class="main">
          <div class="page-container page-component">
            <div class="home_wrap">
              <div id="floor-user-profile_485" class="grey-bg">
                <!--头部-->
                <div class="user-profile-head">
                  <div class="user-profile-head-banner">
                    <div class="user-profile-wrapper">
                      <h1 class="user-profile-title"
                          style="color:#fff;padding-left: 0"
                      >{{ userInfo.nickName }} 的主页</h1>
                      <div class="user-profile-sub-title"
                           style="color:#fff;"
                      >{{ userInfo.remark }}
                      </div>
                    </div>
                  </div>
                  <div class="user-profile-head-info user-profile-wrapper">
                    <div class="user-profile-head-info-t clearfix">
                      <div class="user-profile-avatar">
                        <img :src="changeAvatar(userInfo.avatar)" :lazy="true">
                        <i v-if="userInfo.sex=='1'" class="user-gender-female"></i>
                        <i v-if="userInfo.sex=='0'" class="user-gender-male"></i>
                      </div>
                      <div class="user-profile-operate-btn">
                        <a class="user-profile-red-btn2"
                           v-if="user.userId && user.userId!==userInfo.userId"
                        ></a>
                        <router-link v-else to="/user/profile" class="user-profile-red-btn">编辑资料
                        </router-link>
                      </div>
                    </div>
                    <div class="user-profile-head-info-m">
                      <div class="user-profile-head-name">
                        <div>{{ userInfo.nickName }}</div>
                      </div>
                      <!--                      <div class="user-profile-head-name">
                                              <div class="sdsdsdsd">{{ userInfo.remark }}</div>
                                            </div>-->
                    </div>
                    <!--<div class="user-profile-head-info-b">
                      <ul>
                        <li>
                          <div class="user-profile-statistics-num">203,749</div>
                          <div class="user-profile-statistics-name">被访问量</div>
                        </li>
                        <li><a href="javascript:;">
                          <div class="user-profile-statistics-num">88</div>
                          <div class="user-profile-statistics-name">原创文章</div>
                        </a></li>
                        <li><a href="https://blog.csdn.net/rank/list/total" target="_blank"
                               data-report-click="{&quot;spm&quot;:&quot;3001.5476&quot;}"
                               data-report-query="spm=3001.5476"
                        >
                          <div class="user-profile-statistics-num">40,424</div>
                          <div class="user-profile-statistics-name">作者排名</div>
                        </a></li>&ndash;&gt;
                        <li><a href="javascript:;">
                          <div class="user-profile-statistics-num">17</div>
                          <div class="user-profile-statistics-name">粉丝数量</div>
                        </a></li>
                      </ul>
                    </div>-->
                  </div>
                </div>

                <!--内容-->
                <div class="user-profile-body">
                  <div class="user-profile-body-inner">

                    <!--左侧-->
                    <div class="user-profile-body-left">
                      <div class="user-profile-aside">
                        <div class="user-general-info single-general-info">
                          <ul>
                            <li class="user-general-info-edu">
                              <div class="user-general-info-left">
                                <i></i>
                                <span>所在社团</span>
                                <span v-if="userInfo.dept && user.deptId"
                                      class="user-general-info-key-word"
                                >
                                  {{ userInfo.dept.deptName }}
                                </span>
                                <span v-if="!user.deptId" class="user-general-info-key-word">无</span>
                              </div>
                            </li>
                            <li class="user-general-info-join-csdn">
                              <i></i><span>于</span>
                              <span class="user-general-info-key-word">
                                {{ parseTime(userInfo.createTime, '{y}-{m}-{d}') }}
                              </span>
                              <span>加入中原工学院社联</span>
                            </li>
                          </ul>
                        </div>
                        <!--<div class="user-achievement user-profile-aside-common-box">
                          <div class="aside-common-box-head">获得成就</div>
                          <div class="aside-common-box-bottom">
                            <div class="aside-common-box-content">
                              <ul>
                                <li>
                                  <i
                                    style="background-image: url(https://img-home.csdnimg.cn/images/20210114022819.png)"
                                  ></i>
                                  <div>获得<span>34</span>次点赞</div>
                                </li>
                                <li>
                                  <i
                                    style="background-image: url(https://img-home.csdnimg.cn/images/20210114022831.png)"
                                  ></i>
                                  <div>内容获得<span>24</span>次评论</div>
                                </li>
                                <li>
                                  <i
                                    style="background-image: url(https://img-home.csdnimg.cn/images/20210114022828.png)"
                                  ></i>
                                  <div>获得<span>107</span>次收藏</div>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="user-profile-medal user-profile-aside-common-box">
                          <div class="aside-common-box-head">荣誉勋章</div>
                          <div class="aside-common-box-bottom">
                            <div class="aside-common-box-content">
                              <ul>
                                <li data-nickname="木槿之夏" data-username="qq_34543252"
                                    data-avatar="https://profile.csdnimg.cn/D/0/8/1_qq_34543252"
                                    data-report-click="{&quot;spm&quot;:&quot;3001.5481&quot;}"
                                    class="csdn-user-medal-btn"
                                ><img src="https://csdnimg.cn/medal/chizhiyiheng@240.png" alt="">
                                </li>
                                <li data-nickname="木槿之夏" data-username="qq_34543252"
                                    data-avatar="https://profile.csdnimg.cn/D/0/8/1_qq_34543252"
                                    data-report-click="{&quot;spm&quot;:&quot;3001.5481&quot;}"
                                    class="csdn-user-medal-btn"
                                ><img src="https://csdnimg.cn/medal/qixiebiaobing2@240.png" alt="">
                                </li>
                              </ul>
                            </div>
                            <button data-nickname="木槿之夏" data-username="qq_34543252"
                                    data-avatar="https://profile.csdnimg.cn/D/0/8/1_qq_34543252"
                                    data-report-click="{&quot;spm&quot;:&quot;3001.5481&quot;}"
                                    class="aside-common-box-bottom-btn csdn-user-medal-btn"
                            >所有勋章<i class="el-icon-arrow-right"></i></button>
                          </div>
                        </div>
                        <div class="user-special-column user-profile-aside-common-box">
                          <div class="aside-common-box-head">TA的专栏</div>
                          <div class="aside-common-box-bottom">
                            <div class="aside-common-box-content aside-box-fold">
                              <ul>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_11000315.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="nuxt">nuxt</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">3篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_9469679.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="面试题总结">面试题总结</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">1篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_9431318.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="随笔">随笔</span> &lt;!&ndash;&ndash;&gt;</a> &lt;!&ndash;&ndash;&gt;</li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_9367105.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="css">css</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">2篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_7320661.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="前端">前端</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">14篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_7331429.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="js常用方法总结">js常用方法总结</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">48篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_7406665.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="Bootstrop Table总结">Bootstrop Table总结</span> &lt;!&ndash;&ndash;&gt;
                                </a>
                                  <div class="special-column-num">1篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_7749010.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="vue">vue</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">34篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_8565202.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="数组去重">数组去重</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">1篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_8565252.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="删除对象中的某一个属性">删除对象中的某一个属性</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">1篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_8565253.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="es6">es6</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">3篇</div>
                                </li>
                                <li><a
                                  href="https://blog.csdn.net/qq_34543252/category_9065831.html" target="_blank"
                                  data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                  data-report-query="spm=3001.5482" class="special-column-name"
                                ><img
                                  src="https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                                  alt=""
                                > <span title="git">git</span> &lt;!&ndash;&ndash;&gt;</a>
                                  <div class="special-column-num">2篇</div>
                                </li>
                              </ul>
                            </div>
                            <button data-report-click="{&quot;spm&quot;:&quot;3001.5482&quot;}"
                                    class="aside-common-box-bottom-btn"
                            >展开<i class="el-icon-arrow-down"></i></button>
                          </div>
                        </div>-->
                      </div>
                    </div>

                    <!--右侧-->
                    <div class="user-profile-body-right">
                      <div class="navList-box">
                        <!--导航栏-->
                        <div class="navList">
                          <ul>
                            <li @click="tagClick('trends')" :class="[tagName.trends?'active':'']">
                              <div v-if="trendsTotal>0">
                                动态·<span class="nav-li-num">{{ trendsTotal }}</span>
                              </div>
                              <div v-else>动态</div>
                            </li>
                            <li @click="tagClick('forum')" :class="[tagName.forum?'active':'']">
                              <div v-if="forumTotal>0">
                                帖子·<span class="nav-li-num">{{ forumTotal }}</span>
                              </div>
                              <div v-else>帖子</div>
                            </li>
                            <li @click="tagClick('collection')" :class="[tagName.collection?'active':'']">
                              收藏<span class="nav-li-num"></span>
                            </li>
                            <li @click="tagClick('follow')" :class="[tagName.follow?'active':'']">
                              关注/订阅<span class="nav-li-num"></span>
                            </li>
                          </ul>
                        </div>
                        <!--内容-->
                        <div>

                          <!--动态-->
                          <div v-show="tagName.trends">
                            <div v-if="trendsTotal>0">
                              <div class="card-list">
                                <!--动态内容-->
                                <div class="feed-card">
                                  <div class="content">
                                    <div v-for="(item,index) in trendsList" :key="index">
                                      <div class="card" style="margin-top: 10px;">
                                        <a class="user-head c-pointer avatar-comp"
                                           href="javascript:void(0)"
                                           @click="btnClick('user',item)"
                                        >
                                          <div class="bili-avatar">
                                            <img class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                                                 :src="changeAvatar(item.user.avatar)" :alt="item.user.nickName"
                                                 :lazy="true"
                                            >
                                          </div>
                                        </a>
                                        <div class="main-content" style="padding-bottom: 0px;">
                                          <div class="user-name fs-16 ls-0 d-i-block">
                                            <a @click="btnClick('user',item)" href="javascript:void(0)"
                                               class="c-pointer"
                                            >{{ item.user.nickName }}</a>
                                          </div>
                                          <div class="time fs-12 ls-0 tc-slate">
                                            <a @click="btnClick('edit',item)" href="javascript:void(0)"
                                               class="detail-link tc-slate"
                                            >{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
                                            </a><span></span>
                                          </div>

                                          <div class="card-content" style="position: relative;">
                                            <div class="post-content">
                                              <div class="original-card-content">
                                                <div class="text p-rel description active"
                                                     @click="btnClick('edit',item)"
                                                >
                                                  <div class="content">
                                                    <div class="content-full" v-if="!item.remark">分享图片</div>
                                                    <div v-else class="content-full"
                                                         v-html="formatSolution(item.remark)"
                                                    ></div>
                                                  </div>
                                                </div>
                                                <div class="imagesbox">
                                                  <div class="zoom-wrap" v-if="item.img && item.img.length>0">
                                                    <ul class="zoom-list list-none zoom-1" v-if="item.img.length===1">
                                                      <li class="card111 card-1" v-for="(itemImg,indexImg) in item.img"
                                                          :key="indexImg"
                                                      >
                                                        <el-image class="img-content" :lazy="true"
                                                                  style="width: 240px; height: 240px;"
                                                                  :preview-src-list="item.srcList"
                                                                  :src="changeUrl(itemImg.fileName)"
                                                        ></el-image>
                                                      </li>
                                                    </ul>
                                                    <ul class="zoom-list list-none zoom-3" v-if="item.img.length>1">
                                                      <li class="card111 card-3" v-for="(itemImg,indexImg) in item.img"
                                                          :key="indexImg"
                                                      >
                                                        <el-image class="img-content" :lazy="true"
                                                                  :preview-src-list="item.srcList"
                                                                  :src="changeUrl(itemImg.fileName)"
                                                        ></el-image>
                                                      </li>
                                                    </ul>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

                                          <!--点赞评论按钮 -->
                                          <div class="button-bar tc-slate">
                                            <div class="single-button c-pointer">
                                              <span :class="[item.showReplyList?'selected':'']"
                                                    class="text-bar"
                                                    @click="btnClick('reply',item)"
                                              >
                                                <i :class="[item.showReplyList?'comment-hover':'comment']"
                                                   class="bp-svg-icon single-icon"
                                                ></i>
                                                <span class="text-offset">{{ item.reply }}</span>
                                              </span>
                                            </div>
                                            <div class="single-button c-pointer p-rel">
                                              <span class="text-bar">
                                                <i class="bp-svg-icon single-icon zan"></i>
                                                <span class="text-offset">{{ item.fabulous }}</span>
                                              </span>
                                            </div>
                                          </div>
                                        </div>

                                        <!--投诉、举报】删除按钮 -->
                                        <div class="button-area c-pointer" style="height: 35px"
                                             @mouseover="subsOpen('trends',item)"
                                             @mouseleave="subsStop('trends',item)"
                                        >
                                          <div class="more-button bp-icon-font icon-more-1">
                                            <div v-if="item.user.userId==user.userId"
                                                 style="-webkit-text-stroke-width: 0px;top: 24px;right: -10px"
                                                 class="more-panel fs-14 ls-0"
                                                 :style="{'display':item.showPoints?'block':'none'}"
                                            >
                                              <p @click="btnClick('del',item)" class="child-button c-pointer">删除</p>
                                            </div>
                                            <div v-else style="-webkit-text-stroke-width: 0px;top: 24px;right: -10px"
                                                 class="more-panel fs-14 ls-0"
                                                 :style="{'display':item.showPoints?'block':'none'}"
                                            >
<!--                                              <p @click="btnClick('guanzhu',item)" class="child-button c-pointer">-->
<!--                                                取消关注</p>-->
                                              <p @click="btnClick('jubao',item)" class="child-button c-pointer">举报</p>
                                            </div>
                                          </div>
                                        </div>

                                        <!--评论内容 -->
                                        <div class="pinglun_class" v-if="item.showReplyList">
                                          <div class="panel-area" style="position: relative;">
                                            <div class="bb-comment ">
                                              <div class="reply-notice"></div>
                                              <div class="comment-send ">
                                                <div class="user-face" v-if="user && user.userId">
                                                  <el-image :lazy="true" class="user-head2" :src="avatar"></el-image>
                                                </div>
                                                <div class="user-face" v-else>
                                                  <img class="user-head2"
                                                       src="../../assets/images/logo/icon-unlogin.png"
                                                  >
                                                </div>
                                                <div class="textarea-container">
                                                  <i class="ipt-arrow"></i>
                                                  <el-input v-model="replyForm.remark" type="textarea"
                                                            placeholder="发一条友善的评论"
                                                            :maxlength="500" show-word-limit
                                                            :autosize="{minRows: 2.5, maxRows: 8}"
                                                            :style="{width: '100%'}"
                                                  >
                                                  </el-input>
                                                  <button
                                                    @click="(replyForm.remark && replyForm.remark.trim().length>0)?submitFormReply(item):''"
                                                    :class="[(replyForm.remark && replyForm.remark.trim().length>0)?'':'disabled']"
                                                    type="button" class="comment-submit"
                                                  >发表评论
                                                  </button>
                                                </div>
                                              </div>
                                              <div class="comment-list has-limit"
                                                   v-for="(itemReply,indexReply) in replyList"
                                                   :key="indexReply"
                                              >
                                                <div class="list-item reply-wrap ">
                                                  <div class="user-face">
                                                    <a href="javascript:void(0)">
                                                      <div class="bili-avatar">
                                                        <img width="48" height="48"
                                                             class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                                                             :src="changeAvatar(itemReply.fromUser.avatar)"
                                                             :lazy="true"
                                                             @click="btnClick('userRely',itemReply)"
                                                        >
                                                        <span class="bili-avatar-icon"></span>
                                                      </div>
                                                    </a>
                                                  </div>
                                                  <div class="con ">
                                                    <div class="user">
                                                      <a href="javascript:void(0)"
                                                         class="name" style="color: #FB7299;"
                                                         @click="btnClick('userRely',itemReply)"
                                                      >{{ itemReply.fromUser.nickName }}</a>
                                                    </div>
                                                    <p class="text" v-html="formatSolution(itemReply.remark)">
                                                      {{ itemReply.remark }}</p>
                                                    <div class="info">
                                                      <span class="time"
                                                      >{{
                                                          parseTime(itemReply.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
                                                        }}</span>
                                                      <div class="operation more-operation">
                                                        <div class="spot"
                                                             @mouseover="subsOpen('reply',itemReply)"
                                                             @mouseleave="subsStop('reply',itemReply)"
                                                        >
                                                          <div class="opera-list" v-if="itemReply.action">
                                                            <ul v-if="itemReply.fromUser.userId==user.userId">
                                                              <li class="blacklist"
                                                                  @click="btnClick('delReply',itemReply,item)"
                                                              >删除
                                                              </li>
                                                            </ul>
                                                            <ul v-else>
                                                              <li class="report">举报</li>
                                                            </ul>
                                                          </div>
                                                        </div>

                                                      </div>
                                                    </div>
                                                    <div class="reply-box"></div>
                                                    <div class="paging-box"></div>
                                                  </div>
                                                </div>
                                              </div>
                                              <div class="bottom-page paging-box-big center">没有更多了～</div>
                                            </div>
                                          </div>
                                        </div>

                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="no-more111111111">没有更多内容了</div>
                            </div>
                            <div v-else>
                              <img src="@/assets/images/personal/20210310101013.png" class="default-img">
                            </div>
                          </div>

                          <!--帖子-->
                          <div v-show="tagName.forum">
                            <div v-if="forumTotal>0">
                              <div v-for="(itemForum,indexForum) in forumList" :key="indexForum">
                                <article class="blog-list-box">
                                  <a @click="btnClick('forum',itemForum)" href="javascript:void(0)">
                                    <div class="blog-list-box-top">
                                      <img src="@/assets/images/personal/20210127052227.png">
                                      <h4>{{ itemForum.forumTitle }}</h4>
                                      <a v-if="user && user.userId===itemForum.userId" @click.stop="delBtn(itemForum)">
                                        <i style="font-size: 16px" class="iconfont icon-shanchu"></i>
                                      </a>
                                    </div>
                                    <div class="blog-list-footer" style="font-size: 14px">
                                      <div class="blog-list-footer-left">
                                        <div class="view-num-box">
                                          <img src="@/assets/images/personal/20210127051656.png">
                                          <span class="view-num">
                                      {{ itemForum.click }}<span class="two-px">阅读</span>
                                    </span>
                                        </div>
                                        <div class="comment-box">
                                          <img src="@/assets/images/personal/20210127051933.png">
                                          <span class="comment-num">
                                      {{ itemForum.reply }}<span class="two-px">评论</span>
                                    </span>
                                        </div>
                                      </div>
                                      <div class="blog-list-footer-right">
                                        <div class="time-box">
                                          <img src="@/assets/images/personal/20210127052225.png">
                                          <span>发表于&nbsp;{{
                                              parseTime(itemForum.createTime, '{y}-{m}-{d} {h}:{i}:{s} ')
                                            }}</span>
                                        </div>
                                      </div>
                                    </div>
                                  </a>
                                </article>
                              </div>
                              <div class="no-more111111111">没有更多内容了</div>
                            </div>
                            <div v-else>
                              <img src="@/assets/images/personal/20210310101013.png" class="default-img">
                            </div>
                          </div>

                          <!--收藏-->
                          <div v-show="tagName.collection">
                            <div>
                              <img src="@/assets/images/personal/20210310101013.png" class="default-img">
                            </div>
                          </div>

                          <!--关注-->
                          <div v-show="tagName.follow">
                            <div>
                              <img class="default-img"
                                   src="@/assets/images/personal/20210310101013.png"
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <Footer></Footer>

    <BackTopBar></BackTopBar>
  </div>

</template>

<script>
import BackTopBar from '@/layout/components/BackTopBar'
import Hearder from '@/components/Hearder'
import Footer from '@/layout/components/Footer'
import { getUserGet } from '@/api/user'
import { mapGetters } from 'vuex'
import { delTrends, listTrends, updateReplyNumber, updateReplyNumberDel } from '@/api/trends'
import { delForum, listForum, updateClickNumber } from '@/api/forum'
import { addReply, delReply, listReply } from '@/api/plainReply'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { addMessage } from '@/api/message'

export default {
  name: 'Personal',
  components: { BackTopBar, Hearder, Footer },
  inject: ['reload'],  //注入依赖
  data() {
    return {
      userInfo: {},
      trendsList: [],
      trendsTotal: 0,
      forumList: [],
      forumTotal: 0,
      replyList: [],
      open: false,
      replyForm: {},
      tagName: {
        trends: true,
        forum: false,
        collection: false,
        follow: false
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    },
    ...mapGetters([
      'user', 'avatar'
    ])
  },
  created() {
    this.getList(this.id)
  },
  methods: {
    delBtn(val){
      console.log(val)
      this.$confirm('确定要删除此条贴子吗？', '删除贴子', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delForum(val.forumId);
      }).then(() => {
        this.msgSuccess("删除成功");
        this.getForumList(this.id)
      })
    },

    async getList(val) {
      await getUserGet(val).then(res => {
        this.userInfo = res.data
      })
      await this.getTrendsList(val)
      await this.getForumList(val)
    },
    getTrendsList(val){
      let queryParams = {
        status: '0',
        userId: val
      }
      listTrends(queryParams).then(response => {
        this.trendsList = response.rows
        this.trendsList.map(item => {
          item.img = this.change(item.img)
          item.srcList = []
          item.img.map(item2 => {
            item.srcList.push(this.changeUrl(item2.fileName))
          })
        })
        this.trendsTotal = response.total
      })
    },
    getForumList(val){
      let queryParams2 = {
        status: '1',
        userId: val
      }
      listForum(queryParams2).then(response => {
        this.forumList = response.rows
        this.forumTotal = response.total
      })
    },

    getReplyList(val) {
      let params = {
        // pageNum: 1,
        // pageSize: 10,
        contentId: val,
        status: '0'
      }
      listReply(params).then(response => {
        this.replyList = response.rows
        // this.total = response.total
      })
    },
    //发布评论
    submitFormReply(val) {
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
          this.replyForm = {}
        })
        return
      }
      if (this.replyForm.remark && this.replyForm.remark.length > 0) {
        this.replyForm.fromId = JSON.parse(JSON.stringify(this.user.userId))
        this.replyForm.contentId = JSON.parse(JSON.stringify(val.trendsId))
        addReply(this.replyForm).then(response => {
          this.msgSuccess('评论成功')
          this.replyForm = {}
          this.getReplyList(val.trendsId)
          updateReplyNumber(val.trendsId)
          if (val.user.userId == this.user.userId) {
            return
          }
          let message = {
            fromId: this.user.userId,
            fromName: this.user.nickName,
            toId: val.user.userId,
            toName: val.user.userName,
            messageTitle: '动态',
            identity: '1',
            type: '1',
            payload: JSON.stringify(val),
            messageContent: '回复了你的动态'
          }
          addMessage(message)
        })
      }
    },

    subsOpen(e, val) {
      if (e == 'trends') {
        this.trendsList.map(item => {
          this.$set(item, 'showPoints', false)
        })
        this.$set(val, 'showPoints', true)
      } else if (e == 'reply') {
        this.replyList.map(item => {
          this.$set(item, 'action', false)
        })
        this.$set(val, 'action', true)
      }

    },
    subsStop(e, val) {
      if (e == 'trends') {
        this.$set(val, 'showPoints', false)
      } else if (e == 'reply') {
        this.$set(val, 'action', false)
      }

    },

    btnClick(e, val, data) {
      if (e == 'forum') {
        updateClickNumber(val.forumId)
        this.$router.push({
          path: '/forum/edit',
          query: {
            id: val.forumId
          }
        })
      } else if (e == 'del') {
        this.$confirm('确定要删除此条动态吗？', '删除动态', {
          cancelButtonText: '我点错了',
          confirmButtonText: '删除',
          type: 'warning'
        }).then(function() {
          return delTrends(val.trendsId)
        }).then(() => {
          this.getTrendsList(this.id)
          this.msgSuccess('删除成功')
        })
      } else if (e == 'delReply') {
        this.$confirm('确定要删除此条评论吗？', '删除评论', {
          cancelButtonText: '我点错了',
          confirmButtonText: '删除',
          type: 'warning'
        }).then(function() {
          return delReply(val.replyId)
        }).then(() => {
          this.getReplyList(data.trendsId)
          updateReplyNumberDel(data.trendsId)
          this.msgSuccess('删除成功')
        })
      } else if (e == 'jubao') {
        this.open = true
      } else if (e == 'reply') {
        if (val.showReplyList) {
          this.$set(val, 'showReplyList', false)
        } else {
          this.$set(val, 'showReplyList', true)
        }
        this.trendsList.map(item => {
          if (item.trendsId !== val.trendsId) {
            this.$set(item, 'showReplyList', false)
          }
        })
        this.getReplyList(val.trendsId)
      } else if (e == 'edit') {
        this.$router.push({
          path: '/trends/edit',
          query: {
            id: val.trendsId
          }
        })
      } else if (e == 'user') {
        this.$router.push({
          path: '/personal',
          query: {
            id: val.userId
          }
        })
        this.reload()
      } else if (e == 'userRely') {
        this.$router.push({
          path: '/personal',
          query: {
            id: val.fromId
          }
        })
        this.reload()
      }
    },

    tagClick(e) {
      if (e == 'trends') {
        this.tagName = {
          trends: true,
          forum: false,
          collection: false,
          follow: false
        }
      } else if (e == 'forum') {
        this.tagName = {
          trends: false,
          forum: true,
          collection: false,
          follow: false
        }
      } else if (e == 'collection') {
        this.tagName = {
          trends: false,
          forum: false,
          collection: true,
          follow: false
        }
      } else if (e == 'follow') {
        this.tagName = {
          trends: false,
          forum: false,
          collection: false,
          follow: true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import 'index.scss';
@import 'trends.scss';
@import 'reply.scss';
</style>
<style scoped>
/deep/ .el-image__preview {
  cursor: zoom-in;
}

/deep/ .el-textarea__inner {
  width: 100%;
  min-height: 22px;
  max-height: 300px;
  letter-spacing: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: pre-wrap;
  color: #222;
  background-color: #fff;
  font-size: 14px;
  vertical-align: baseline;
  outline: none;
  line-height: 22px;
  border-radius: 4px;
  word-break: break-word;
  word-wrap: break-word;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
</style>
